<template>
    <div class="register">
        <div class="tips">您需要登录才能继续访问
            <span>关闭</span>
        </div>
        <div class="logo">
            <div class="logo_img"></div>
        </div>

        <div class="inputs">
            <div class="userTel">
                <div class=""><span>+86</span><span><van-icon name="arrow-down" /></span></div>
                <input type="text" placeholder="请输入手机号" v-model="tel" @input="funtel">
            </div>
            <div class="userYzm">
                <input type="text" placeholder="请输入验证码" v-model="pwd">
                <span :class="{bgc:flag}" @click="removeCode">获取验证码</span>
            </div>
            <p>账号密码登录</p>
            <button @click="funbtn">登录</button>
            
            <div class="checkBox">
                <section>
                <van-checkbox v-model="checked" ></van-checkbox>
                </section>
                <span>
                    已阅读并同意以下协议<span>淘宝平台服务协议、隐私权政策、法律声明、支付宝及客户端服务协议</span>，未注册的手机号将自动为您创建账号
                </span>
            </div>
        </div>

    </div>
</template>

<script>
import Vue from 'vue';
import { Icon } from 'vant';
import { Checkbox, CheckboxGroup } from 'vant';

Vue.use(Checkbox);
Vue.use(CheckboxGroup)
Vue.use(Icon);
export default {
    data(){
        return{
            tel:"",
            pwd:"",
            flag:false,
            checked:false,
            resTestCode:""
        }
    },
    methods:{
        // 鼠标光标离开手机号输入框
        funtel(){
            const regTel = /^1[3-9]\d{9}$/
            if (regTel.test(this.tel)) {
                this.flag=true
            } else {
               this.flag=false
               console.log("请输入正确的手机号");
            }
        },

        removeCode(){
            if(this.flag){
                this.$http({
                    url: `http://118.178.238.19:3001/api/user/dosendmsgcode`,
                    method: "post",
                    data: {
                        tel: this.tel
                    }
                }).then(res => {
                    console.log(res.data.data);
                    this.resTestCode = res.data.data
                })
            }
        },
        // 点击改变选中状态
        //点击登录
        funbtn(){
            if(this.flag&&this.checked){
                if (this.pwd == this.resTestCode){
                    this.$http({
                        url: `http://localhost:3000/user`,
                        method: "post",
                        data: {
                            tel: this.tel,
                            pwd: this.pwd,
                        }
                    }).then(res => {
                        console.log(res)
                    })
                    localStorage.setItem("token", "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0ZWwiOiIxODczMzE3OTcwOCIsImlhdCI6MTY3NTYxMjIzNiwiZXhwIjoxNjc2OTA4MjM2fQ.48n823ysZpXeku8mh3GZyMg31ZWBGiPI0MbIzZZcQNY")
                    this.$router.push("/")
                }else{
                    console.log("验证码错误");
                }
            }
        }
    }
}
</script>

<style scoped>
.tips{
    width: 100%;
    height: 52px;
    background: rgb(238, 238, 238);
    text-align: left;
    line-height: 52px;
    box-sizing: border-box;
    padding-left: 20px;
    position: absolute;
    left: 0px;
    top: 0px;
    font-size: 16px;
    font-weight: bold;
    color: rgb(51, 51, 51);
}
.tips span{
    display: block;
    position: absolute;
    right: 0px;
    top: 0px;
    height: 52px;
    line-height: 52px;
    padding: 0px 20px;
    color: rgb(153, 153, 153);
}
.logo{
    width: 100%;
    height: 80px;
    margin-top: 10px;
}
.logo_img{
    background: url(https://gw.alicdn.com/tfs/TB1puqzr6MZ7e4jSZFOXXX7epXa-160-160.png) no-repeat;
    background-size: contain;
    width: 80px;
    height: 80px;
    margin: 52px auto 0;
}
.inputs{
    width: 90%;
    height: 500px;
    margin: 10px 5%;
}
.userTel,.userYzm{
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333;
    border-bottom: 1px solid #ff5000;
}
.userTel div{
    width: 60px;
    height: 36px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.userTel div span:nth-child(1){
    padding: 0 10px ;
}
.userTel input{
    flex: 1;
    height: 100%;
    height: 30px;
    padding-left: 5px;
}
.userYzm span{
    width: 100px;
    height: 36px;
    color: #666666;
    text-align: center;
    line-height: 36px;
}
.userYzm .bgc {
    color: #ff5000;
}
.userYzm input{
    flex: 1;
    margin-left: 5px;
}
.userYzm{
    margin-top: 50px;
}
.inputs p{
    margin: 20px 0 8px;
    font-size: 13px;
}
.inputs button{
    width: 100%;
    background: -webkit-linear-gradient(left, #ff9000, #ff5000) no-repeat;
    border: 1px solid #ff9000;
    color: #fff;
    box-shadow: 0 2px 4px #f7c7b1;
    height: 45px;
    border-radius: 35px;
    margin-top: 35px;
    font-size: 16px;
}
.checkBox{
    width: 100%;
    display: flex;
    margin-top: 15px;
    position: relative;
}

.checkBox span{
    width: 90%;
    font-size: 14px;
    border-left: 10px solid transparent;
    display: inline-block;
    margin-left: 5px;
    color: #666666;
}
.checkBox span span{
    display: inline;
    color: #ff5500;
}
.van-checkbox{
    width: 20px;
    height: 20px;
}
.inputs .van-checkbox__icon .van-icon{
    width: 15px;
    height: 15px;
}
</style>